<!--
 * @Author: your name
 * @Date: 2021-01-04 11:38:57
 * @LastEditTime: 2021-02-20 13:38:51
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \yellow-member-admin\src\page\add-video\index.vue
-->
<template>
  <div class="add-img">
    <Breadcrumb :navList="['图片管理', '添加图片']"></Breadcrumb>
    <ul class="img-upload">
      <draggable
        v-model="rawList"
        chosenClass="chosen"
        forceFallback="true"
        group="people"
        animation="1000"
        @start="onStart"
        @end="onEnd"
      >
        <transition-group>
          <li v-for="(item, index) in imageUrlList" :key="index + 'a'">
            <!-- <img :src="item" /> -->
            <el-tooltip
              :open-delay="300"
              effect="dark"
              content="点击图片预览大图"
              placement="top-start"
            >
              <el-image :src="item" :preview-src-list="imageUrlList">
              </el-image>
            </el-tooltip>
            <div class="son-div cover" @click="deleteImg(index)">
              <i class="el-icon-close"></i>
            </div>
          </li>
        </transition-group>
      </draggable>
      <li>
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-change="qrcodeChange"
          :auto-upload="false"
          :limit="1000"
          multiple
          list-type="picture-card"
        >
          <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar" /> -->
          <i class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </li>
    </ul>
    <el-button type="primary" @click="uploadImg">确认上传</el-button>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import { compressImage } from "@/utils/compressImage"; // 图片压缩方法
export default {
  components: {
    draggable,
  },
  data() {
    return {
      rawList: [],
      imageUrlList: [],
    };
  },
  methods: {
    //开始拖拽事件
    onStart(events) {
    },
    //拖拽结束事件
    onEnd({ newIndex, oldIndex }) {
      // .splice(从哪个索引号开始删除，依次删除几个元素，删除后该位置增加的元素)
      const oldImg = this.imageUrlList[oldIndex];
      this.imageUrlList.splice(oldIndex, 1);
      this.imageUrlList.splice(newIndex, 0, oldImg);
    },
    // 选中上传的图片
    qrcodeChange(files, fileList) {
      this.imageUrlList.push(files.url);
      const config = {
        width: 500, // 压缩后图片的宽
        // height: 140/250*500, // 压缩后图片的高
        quality: 1, // 压缩后图片的清晰度，取值0-1，值越小，所绘制出的图像越模糊
      };
      compressImage(files.raw, config).then((result) => {
        const fileSize = parseFloat(
          parseInt(result.size) / 1024 / 1024
        ).toFixed(2); //获取图片大小 单位M
        if (!+fileSize) {
          this.rawList.push(files.raw);
        } else {
          this.rawList.push(result);
        }
      });
    },
    // 删除即将上传的图片
    deleteImg(index) {
      this.rawList.splice(index, 1);
      this.imageUrlList.splice(index, 1);
      this.$message.success("删除成功");
    },
    // 上传图片
    async uploadImg() {
      const photos = this.rawList;
      const { code, data, msg } = await this.$api.common.addImg({ photos });
      if (!code) {
        this.imageUrlList = [];
        this.rawList = [];
        this.$message.success(msg);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/.add-img {
  .img-upload {
    display: flex;
    flex-wrap: wrap;
    span {
      display: flex;
      flex-wrap: wrap;
    }
    li {
      margin-left: 20px;
      margin-top: 20px;
      flex-shrink: 0;
      width: 200px;
      height: 150px;
      overflow: auto;
      background-color: #fbfdff;
      border: 1px dashed #c0ccda;
      border-radius: 6px;
      position: relative;
      /* display:flex;
      justify-content: center;
      align-items: center; */
      .el-image {
        padding: 10%;
        width: 100%;
        // height: 100%;
        // height: 100%;
        img {
          height: auto;
          // width: inherit;
        }
      }
      .cover {
        opacity: 0;
        position: absolute;
        top: 0;
        right: 0;
        width: 17px;
        height: 17px;
        border-radius: 0 0 0 6px;
        background-color: rgba(44, 43, 43, 0.6);
        i {
          opacity: 0;
        }
      }
      &:hover {
        .son-div.cover {
          transition: all 1s;
          opacity: 1;
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
          i {
            opacity: 1;
            font-size: 10px;
          }
        }
      }
    }
  }
  .el-button {
    margin-left: 20px;
    margin-top: 30px;
  }
  .avatar-uploader {
    /*  width: 200px;
    height: 150px; */
    .el-upload {
      width: 100%;
      height: 100%;
    }
  }
}
</style>